<template>
  <!-- <span>抄表总览</span> -->
  <div class="flnMeterReadingPandect">
    <button class="leftTreetitleButton" @click="showTree" v-if="!treeShowOrClose">
      <i class="el-icon-caret-right"></i>
    </button>
    <!-- 树形图 -->
    <!-- <leftTree></leftTree> -->
    <div class="leftTree" v-show="treeShowOrClose">
      <waterMeterLeftTree v-if="treeName!= 'third' " class="waterMeterLeftTree" @clickClose='clickClose' @areaIf='areaIf' type="1" @getTrees="getTrees" />
    </div>
    <div :class="[{rightcontant:treeShowOrClose},{rightcontant2:!treeShowOrClose}]">
      <div style="padding: 0px">

        <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-left:10px;">
          <el-tab-pane label="集中器监控" name="first">
            <flConMonitoring :areaCodeq='areaCodeq' :treesList="treesList" />
          </el-tab-pane>
          <el-tab-pane label="抄表记录" name="second">
            <flConCblog :areaCodeq='areaCodeq' @tiaoSan='tiaoSan' :treesList="treesList" />
            <!-- <flConCblog :areaCodeq='areaCodeq' @tiaoSan='tiaoSan' @tiaoSanshujhu='tiaoSanshujhu'/> -->
          </el-tab-pane>
          <el-tab-pane label="抄表数据" name="third">
            <flConMeterInfo key='shaxin' ref="chaobiaoshuju" :areaCodeq='areaCodeq' :isOrFirstToThird='isOrFirstToThird' />
            <!-- :key="threeKey"  -->
          </el-tab-pane>

        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import flConMonitoring from './compotents/flConMonitoring'
// import flConCblog from './compotents/flConCblog'
import flConCblog from './compotents/indexm'
import flConMeterInfo from './compotents/flConMeterInfo'
// import waterMeterLeftTree from './compotents/waterMeterLeftTree'
import { waterMeterLeftTree } from '@/views/components/FLPage'
import flConMeterInfo1 from './compotents/flConMeterInfo1'
import flConMeterInfo2 from './compotents/flConMeterInfo2'
export default {
  components: {
    waterMeterLeftTree,
    flConMeterInfo,
    flConMeterInfo1,
    flConMeterInfo2,
    flConCblog,
    flConMonitoring,
  },
  name: 'flnMeterReadingPandect',
  // props:["areaCode"],
  data() {
    return {
      treeName: '',
      shaxin: -1,
      isOrFirstToThird: '1',
      treeShowOrClose: false,
      areaCodeq: '',
      areaCodep: '',
      activeName: 'first',
      firstKey: 0,
      twoKey: 0,
      threeKey: 0,
      toThirdData: {},
      treesList: [],
    }
  },
  methods: {
    getTrees(trees) {
      this.treesList = trees
    },
    tiaoSanshujhu(obj) {
      // console.log(obj,22);
      // this.toThirdData = obj
      //   this.shaxin = this.shaxin + 1
    },
    // 抄表记录的回调函数-调到抄表记录
    tiaoSan(val) {
      console.log(val, '999+++')
      // { rowbj, canshu111} = val
      let rowbj = val.rowbj
      let canshu111 = val.canshu111
      if (canshu111 == '1') {
        this.toThirdData = rowbj
        this.isOrFirstToThird = '2'
        // this.shaxin = this.shaxin + 1
        console.log(rowbj, 444)
        this.$refs.chaobiaoshuju.forData(1, 10, {}, rowbj)

        this.activeName = 'third'
      }
    },
    showTree() {
      if (this.treeName != 'third') this.treeShowOrClose = true
    },
    // 左侧小区条件
    areaIf(areaCode) {
      console.log(areaCode)
      this.currentPage = 1
      this.areaCodeq = areaCode
      this.areaCodep = areaCode
      // this.forData(this.currentPage, this.pagesize, this.suoS);
    },
    clickClose(res) {
      // console.log(res,999);
      if (res === '点击隐藏') {
        this.treeShowOrClose = false
      }
    },
    handleClick({ name }) {
      this.treeName = name
      this.isOrFirstToThird = '1'
      if (name == 'third') this.$refs.chaobiaoshuju.forData(1, 10, {})
      if (name == 'third') this.treeShowOrClose = false
    },
  },
  watch: {
    areaCodeq(newValue) {
      console.log(newValue, 88666)
      this.areaCodeq = newValue
      console.log(this.areaCodeq, 88666)
      // this.areaCodep = newValue
      this.firstKey = this.firstKey + 1
      this.twoKey = this.twoKey + 1
      this.threeKey = this.threeKey + 1
      // this.$bus.$emit('areaCodeqtwo',newValue)

      // this.areaCodeq = newValue
    },
  },
}
</script>

<style lang="scss" scoped>
.flnMeterReadingPandect {
  display: flex;
  .leftTreetitleButton {
    margin-top: 10px;
    border: 0;
    height: 32px;
  }
  .leftTree {
    width: 14.2%;
    .waterMeterLeftTree {
      border: 1px soild #ccc;
    }
  }
  .rightcontant {
    width: 85.8%;
    display: flex;
    flex-direction: column;
    /deep/ .el-table--mini {
      .gutter {
        display: table-cell !important;
      }
      .el-table__body-wrapper {
        .el-table__body {
          tbody {
            .el-table__row {
              height: 47px !important;
            }
          }
        }
      }
    }
    .right_row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .leftButtons {
        // width: 300px;
        display: flex;
        .meterExchangeData {
          // margin-right: 10px;
        }
      }
      .centerButtons {
        flex: 1;
      }
      .rightButtons {
        // position: absolute;
        padding-left: 50px;
        display: flex;
        flex-direction: row;
        justify-content: end;
        // right: 0;
        width: 300px;
      }
      // .hunt_sunS_F{
      //   float: right;
      //   margin: 10px;
      // }
    }
    .do {
      display: flex;
    }
    .pagination {
      margin-top: 15px;
    }
  }
  .rightcontant2 {
    width: 97%;
    /deep/ .el-table--mini {
      .gutter {
        display: table-cell !important;
      }
      .el-table__body-wrapper {
        .el-table__body {
          tbody {
            .el-table__row {
              height: 47px !important;
            }
          }
        }
      }
    }
    .right_row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      // position: relative;
      .leftButtons {
        // width: 300px;
        display: flex;
        .meterExchangeData {
          margin-right: 10px;
        }
        // margin-left: 10px;
      }
      .centerButtons {
        flex: 1;
      }
      .rightButtons {
        // position: absolute;
        // right: 0;
        padding-left: 50px;
        width: 300px;
      }
      .hunt_sunS_F {
        float: right;
        margin: 10px;
      }
    }
    .do {
      display: flex;
    }
    .pagination {
      text-align: left;
      margin-top: 15px;
    }
  }
}
</style>
